<template>
  <section id="app" class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autocomplete="off"
        autofocus
        v-model="input"
        @keyup.enter="addTodo"
      />
    </header>
    <section class="main" v-show="count">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="allDone"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          v-for="(item, index) in filteredTodos"
          :key="`todo${index}`"
          :class="{
            editing: item === editingTodo,
            completed: item.completed,
          }"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.completed" />
            <label @dblclick="editTodo(item)">{{ item.text }}</label>
            <button class="destroy" @click="remove(item)"></button>
          </div>
          <input
            class="edit"
            type="text"
            v-editing-focus="item === editingTodo"
            v-model="item.text"
            @keyup.enter="doneEdit(item)"
            @blur="doneEdit(item)"
            @keyup.esc="cancelEdit(item)"
          />
        </li>
      </ul>
    </section>
    <footer class="footer" v-show="count">
      <span class="todo-count">
        <strong>{{ remainingCount }}</strong>
        {{ remainingCount > 1 ? "items" : "item" }} left
      </span>
      <ul class="filters">
        <li><a href="#/all">All</a></li>
        <li><a href="#/active">Active</a></li>
        <li><a href="#/completed">Completed</a></li>
      </ul>
      <button
        class="clear-completed"
        v-show="count > remainingCount"
        @click="removeCompleted"
      >
        Clear completed
      </button>
    </footer>
  </section>
</template>

<script>
import useAdd from "./useModule/useAdd";
import useRemove from "./useModule/useRemove";
import useEdit from "./useModule/useEdit";
import useFilter from "./useModule/useFilter";
import useStorage from "./useModule/useStorage";

export default {
  name: "App",
  setup() {
    const todos = useStorage();
    const { remove, removeCompleted } = useRemove(todos);
    return {
      todos,
      remove,
      removeCompleted,
      ...useAdd(todos),
      ...useEdit(remove),
      ...useFilter(todos),
    };
  },

  directives: {
    editingFocus: (el, binding) => {
      binding.value && el.focus();
    },
  },
};
</script>

<style>
@import url("./assets/index.css");
</style>
